<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.keyword" placeholder="请输入姓名或盐值"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="handleCurrentChange(1)">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="employees" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column type="index">
            </el-table-column>
            <el-table-column prop="username" label="姓名" sortable>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" sortable>
            </el-table-column>
            <el-table-column prop="phone" label="联系电话" sortable>
            </el-table-column>
            <el-table-column prop="salt" label="盐值" sortable>
            </el-table-column>
            <el-table-column prop="password" label="密码" sortable>
            </el-table-column>
            <el-table-column prop="age" label="年龄" sortable>
            </el-table-column>
            <!--启用禁用-->
            <el-table-column prop="state" label="状态" sortable>
                <template scope="scope">
                    <span v-if="scope.row.state==0" style="color: #13ce66">启用</span>
                    <span v-else-if="scope.row.state==-1" style="color: red">禁用</span>
                    <span v-else>未知</span>
                </template>
            </el-table-column>
            <el-table-column prop="deptName.name" label="部门名称" sortable>
            </el-table-column>
            <el-table-column prop="logininfo_id" label="登录信息的id" sortable>
            </el-table-column>
            <el-table-column prop="shop_id" label="店铺id" sortable>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit( scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5"
                           :total="total" style="float:right;">
            </el-pagination>
        </el-col>


        <!--新增界面-->
        <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
                    <el-form-item label="姓名" prop="username">
                        <el-input v-model="addForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="addForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="addForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="盐值" prop="salt">
                        <el-input v-model="addForm.salt"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="addForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="addForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="addForm.state">
                            <el-radio class="radio" :label="0">启用</el-radio>
                            <el-radio class="radio" :label="-1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="部门名称">
                        <el-select v-model="addForm.deptName.id" placeholder="请选择部门名称">
                            <el-option
                                    v-for="item in departments"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                  <span>{{item.name}}</span>

                            </el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="addForm.role.id" placeholder="请选择角色">
                        <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            <span>{{item.name}}</span>

                        </el-option>
                    </el-select>
                </el-form-item>
                </el-form>


            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit" :listLoading="addLoading">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    //import NProgress from 'nprogress'
    import {getEmployeeListPage, removeEmployee, batchRemoveEmployee, editEmployee, addEmployee} from '../../api/api';

    export default {
        data() {
            return {
                filters: {
                    keyword: ''
                },
                employees: [],
                roles:[],
                departments:[],
                total: 0,
                currentPage: 1,
                listLoading: false,
                sels: [],//列表选中列
                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    //表单校验
                    username: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ]
                },
                //新增界面数据
                addForm: {
                    username: '',
                    email: '',
                    phone: '',
                    salt: '',
                    password: '',
                    age: '',
                    state: -1,
                 /*   department_id: '',
                    logininfo_id: '',
                    shop_id: '',*/
                    deptName: {},
                    role:{}
                }

            }
        },
        methods: {
            handleEdit: function(row){
                this.dia
                this.title="编辑";
                console.log('------handleEdit',row);
                //显示对话框
                this.addFormVisible = true;
                if(!row.deptName){
                    row.deptName={}
                }
                //row就是当前行的实体对象 赋值该对象并赋值给addForm
                this.addForm=Object.assign({},row);

            },
            handleCurrentChange(cPage) {
                //val为当前页
                console.log('handleCurrentChange', cPage);
                this.currentPage = cPage;
                //发起分页查询
                this.getEmployees();
            },
            //获取员工列表
            getEmployees() {
                //获取请求参数
                let para = {
                    currentPage: this.currentPage,
                    keyword: this.filters.keyword
                };
                //开启忙等
                this.listLoading = true;
                //发送分页查询请求
                this.$http.post('/emp', para).then((res) => {
                    console.log(res.data);
                    //更新表格数据 rows
                    this.employees = res.data.rows;
                    //更新分页的总数据
                    this.total = res.data.totals;
                    //关闭忙等
                    this.listLoading = false;

                });
            },
            //删除
            handleDel: function (id) {
                console.log("要删除的id",id);
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //发送删除请求
                    this.$http.delete('/emp/'+id).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(1);
                    });
                }).catch(() => {

                });
            },
            //显示新增界面
            handleAdd: function () {
                this.addFormVisible = true;
            },
            //新增
            addSubmit: function () {
                //表单校验
                this.$refs.addForm.validate((valid) => {
                   //判断是否通过校验
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.addForm);
                            console.log('收集到的参数',para)

                         this.$http.put('/emp',para).then((res) => {
                                //关闭盲等
                              this.addLoading = false;
                             //成功提示
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                //重置表单
                                this.$refs['addForm'].resetFields();
                                //隐藏添加的对话框
                                this.addFormVisible = false;
                                //重新查询列表更新页面
                                this.handleCurrentChange(1);
                            });
                        });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                console.log('批量删除---',this.sels)
                var ids = this.sels.map(item => item.id);
                console.log('遍历集合,收集id',ids);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;

                   this.$http.patch('/emp',ids).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(1);
                    });
                }).catch(() => {

                });
            },
            /*查询员工部门的方法*/
            getDepartments(){
                this.$http.get('/dept').then(res=>{
                    console.log('所有部门---',res.data);
                    this.departments = res.data;
                }).catch(res=>{

                })
            },
            getRoles(){
                this.$http.get('/role').then(res=> {
                    console.log('所有角色',res.data)
                    this.roles = res.data;
                }).catch(res=>{

                })
            }
        },
        mounted() {
            this.getEmployees();
            //调用查询员工部门的方法
            this.getDepartments();
            this.getRoles();
        }
    }

</script>

<style scoped>

</style>